<template>
  <view class="container">
    <view class="card">
      <view class="card-header">
        <text class="title">用户信息留资</text>
        <text class="subtitle">请填写您的信息，我们将尽快与您联系</text>
      </view>
      
      <view class="form">
        <!-- 姓名输入 -->
        <view class="form-item">
          <text class="label">姓名</text>
          <input 
            v-model="formData.name" 
            class="input" 
            placeholder="请输入您的姓名"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
        
        <!-- 电话输入 -->
        <view class="form-item">
          <text class="label">联系电话</text>
          <input 
            v-model="formData.phone" 
            class="input" 
            placeholder="请输入您的手机号码"
            placeholder-class="placeholder"
            type="number"
            maxlength="11"
          />
        </view>
        
        <!-- 车型选择 -->
        <view class="form-item">
          <text class="label">选择车型</text>
          <picker 
            class="picker" 
            mode="selector" 
            :range="carBrands" 
            range-key="name"
            @change="onCarBrandChange"
          >
            <view class="picker-text">{{ selectedCarBrand.name || '请选择车型' }}</view>
          </picker>
        </view>
        
        <!-- 型号选择 -->
        <view class="form-item">
          <text class="label">选择型号</text>
          <picker 
            class="picker" 
            mode="selector" 
            :range="carModels" 
            range-key="name"
            :disabled="!selectedCarBrand.id"
            @change="onCarModelChange"
          >
            <view class="picker-text" :class="{ 'disabled': !selectedCarBrand.id }">
              {{ selectedCarModel.name || (selectedCarBrand.id ? '请选择型号' : '请先选择车型') }}
            </view>
          </picker>
        </view>
        
        <!-- 提交按钮 -->
        <button 
          class="submit-btn" 
          :disabled="!isFormValid" 
          :class="{ 'disabled': !isFormValid }"
          @click="submitForm"
        >
          提交信息
        </button>
      </view>
    </view>
    
    <!-- 提交成功提示 -->
    <view v-if="showSuccess" class="success-message">
      <text class="success-text">提交成功！我们会尽快与您联系</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 表单数据
const formData = reactive({
  name: '',
  phone: ''
})

// 车型和型号数据
const carBrands = ref([
  { id: 1, name: '特斯拉' },
  { id: 2, name: '比亚迪' },
  { id: 3, name: '蔚来' },
  { id: 4, name: '小鹏' },
  { id: 5, name: '理想' }
])

const carModelsData = ref({
  1: [
    { id: 101, name: 'Model S' },
    { id: 102, name: 'Model 3' },
    { id: 103, name: 'Model X' },
    { id: 104, name: 'Model Y' }
  ],
  2: [
    { id: 201, name: '汉' },
    { id: 202, name: '唐' },
    { id: 203, name: '宋' },
    { id: 204, name: '秦' },
    { id: 205, name: '海豚' }
  ],
  3: [
    { id: 301, name: 'ES6' },
    { id: 302, name: 'ES8' },
    { id: 303, name: 'EC6' },
    { id: 304, name: 'ET7' }
  ],
  4: [
    { id: 401, name: 'P7' },
    { id: 402, name: 'P5' },
    { id: 403, name: 'G3' },
    { id: 404, name: 'G9' }
  ],
  5: [
    { id: 501, name: '理想ONE' },
    { id: 502, name: '理想L9' },
    { id: 503, name: '理想L8' },
    { id: 504, name: '理想L7' }
  ]
})

// 选中的车型和型号
const selectedCarBrand = ref({})
const selectedCarModel = ref({})

// 根据选中车型过滤的型号列表
const carModels = computed(() => {
  if (selectedCarBrand.value.id) {
    return carModelsData.value[selectedCarBrand.value.id] || []
  }
  return []
})

// 显示提交成功提示
const showSuccess = ref(false)

// 表单验证
const isFormValid = computed(() => {
  return formData.name.trim() !== '' && 
         formData.phone.trim() !== '' && 
         /^1[3-9]\d{9}$/.test(formData.phone) &&
         selectedCarBrand.value.id && 
         selectedCarModel.value.id
})

// 车型选择变化
const onCarBrandChange = (e) => {
  const index = parseInt(e.detail.value)
  selectedCarBrand.value = carBrands.value[index]
  // 重置型号选择
  selectedCarModel.value = {}
}

// 型号选择变化
const onCarModelChange = (e) => {
  const index = parseInt(e.detail.value)
  selectedCarModel.value = carModels.value[index]
}

// 提交表单
const submitForm = () => {
  if (!isFormValid.value) return
  
  // 模拟提交数据
  const submitData = {
    name: formData.name,
    phone: formData.phone,
    carBrand: selectedCarBrand.value.name,
    carModel: selectedCarModel.value.name
  }
  
  console.log('提交数据:', submitData)
  
  // 显示成功提示
  showSuccess.value = true
  
  // 3秒后隐藏成功提示
  setTimeout(() => {
    showSuccess.value = false
  }, 3000)
  
  // 重置表单
  resetForm()
}

// 重置表单
const resetForm = () => {
  formData.name = ''
  formData.phone = ''
  selectedCarBrand.value = {}
  selectedCarModel.value = {}
}

// 页面加载时初始化数据
onMounted(() => {
  // 可以在这里添加初始化逻辑，比如从接口获取车型数据
})
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/static/bgk.jpg');
  background-size: 100% 100%;
}

.card {
  width: 100%;
  max-width: 700rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-top: 40rpx;
  background-color: rgba(255, 255, 255, .6);
}

.card-header {
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 26rpx;
  color: #666666;
}

.form {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  font-size: 30rpx;
  color: #333333;
  display: block;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.input, .picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: #ffffff;
}

.picker {
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 28rpx;
  color: #333333;
}

.picker-text.disabled {
  color: #999999;
}

.placeholder {
  color: #999999;
  font-size: 28rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #007AFF;
  color: #ffffff;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  border: none;
}

.submit-btn.disabled {
  background-color: #cccccc;
  color: #999999;
}

.success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 30rpx 50rpx;
  border-radius: 10rpx;
  z-index: 999;
}

.success-text {
  color: #ffffff;
  font-size: 30rpx;
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .container {
    padding: 20rpx;
  }
  
  .card {
    margin-top: 20rpx;
  }
  
  .form {
    padding: 20rpx;
  }
}
</style>